.tb-column {
    width: 320px;
    float: left;
    padding-bottom: 100px;
}

.tb-column-header, .tb-add-item {
    border-radius: 4px;
    margin: 0 1em 1em 0;
    padding: 0.4em;
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    cursor: default;
}

.tb-column-header {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #57a957;
    background-image: -moz-linear-gradient(top, #62c462, #57a957); /* Firefox 3.6 */
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
    background-image: -webkit-linear-gradient(top, #62c462, #57a957); /* Safari 5.1+, Chrome 10+ */
    background-image: -o-linear-gradient(top, #62c462, #57a957); /* Opera 11.10+ */
    background-image: linear-gradient(to bottom, #62c462, #57a957); /* CSS3 Compliant */
    background-repeat: repeat-x;
    border-color: #418241 #57a957 #3d773d;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#62c462', endColorstr = '#57a957', GradientType = 0); /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

.tb-add-item {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #49afcd;
    background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
    background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
    background-repeat: repeat-x;
    border-color: #247188 #2f96b4 #1f6377;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#5bc0de', endColorstr = '#2f96b4', GradientType = 0); /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

.tb-column-header:hover, .tb-add-item:hover {
    color: #ffffff;
    text-decoration: none;
    background-position: 0 -15px;
}

.tb-column-header:hover {
    background-color: #51A351;
}

.tb-add-item:hover {
    background-color: #2F96B4;
}

.tb-task {
    margin: 0 1em 1em 0;
}

.tb-task-header {
    margin: 0.3em;
    border-radius: 4px;
    border: 1px solid #aaaaaa;

    cursor: default;
    background-color: #F5F5F5;
    background-repeat: no-repeat;
    background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); /* Safari 5.1+, Chrome 10+ */
    background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); /* Firefox 3.6 */
    background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); /* Opera 11.10+ */
    background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); /* CSS3 Compliant */
    padding: 5px 14px 6px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    color: #333;
    font-size: 14px;
    line-height: normal;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); /* Safari 4 */
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); /* Firefox 3.6 */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -webkit-transition: 0.1s linear background-image;
    -moz-transition: 0.1s linear background-image;
    -o-transition: 0.1s linear background-image;
    transition: 0.1s linear background-image;
    overflow: visible; /* the overflow property removes extra width in IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#e6e6e6', GradientType = 0); /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    vertical-align: middle;
}

.tb-task-header:hover {
    color: #333;
    text-decoration: none;
    background-color: #e6e6e6;
    background-position: 0 -15px;
}

.tb-task-header .ui-icon {
    float: right;
}

.tb-task-content {
    padding: 0.4em;
}

.ui-sortable-placeholder {
    border: 1px dotted black;
    visibility: visible !important;
    height: 50px !important;
}

.ui-sortable-placeholder * {
    visibility: hidden;
}

.on-drag {
    transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
}